<!DOCTYPE html>
<html lang="en">

<!-- 页面中 head是头 -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>北京千锋Java2306</title>
    <link rel="stylesheet" type="text/css" href="../css/test.css"></link>
    <style type="text/css">
        li {color:blue;}
        #a1 {color:deepskyblue;}
        .testClass{color:rosybrown;}
    </style>
</head>

<!--   注释: 页面中body是身体  -->
<!--<body bgcolor="green" background="../img/11.jpg">-->
<body>
        <font class="testClass">测试页面, 下面横线10像素大小</font>
        <h1>1号标题</h1>
        <h2>2号标题</h2>
        <hr size="10px" color="blue"/>
        <br><strong>测试页面测试页面</strong>
        <br><b>测试页面测试页面</b>
        <!--   列表     -->
        <ul type="disc">
            <li>测试页面测试页面</li>
            <li>测试页面测试页面</li>
            <li>测试页面测试页面</li>
            <li>测试页面测试页面</li>
        </ul>

        <!-- 图片展示标签 -->
        <img src="../img/2.jpg" width="300" height="300"><br>

        <!-- 鼠标点击后跳转连接 -->
        <a id="a1" href="http://www.baidu.com">跳转到百度</a><br>
        <a id="a2" href="http://www.jd.com">跳转到京东</a><br>
        <a href="http://www.taobao.com">跳转到淘宝</a><br>

        <!-- 表格 -->
        <table style="color:red">
            <!--一行数据-->
            <tr>
                <td>id</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>

            <tr>
                <td>1</td>
                <td>青龙</td>
                <td>男</td>
                <td>18</td>
            </tr>

            <tr>
                <td>2</td>
                <td>白虎</td>
                <td>女</td>
                <td>85</td>
            </tr>

            <tr>
                <td>3</td>
                <td>朱雀</td>
                <td>女</td>
                <td>85</td>
            </tr>

            <tr>
                <td>4</td>
                <td>玄武</td>
                <td>男</td>
                <td>85</td>
            </tr>
        </table>
</body>
</html>